﻿@{
    ViewBag.Title = "" + FOResource.UI.Product.Loan.consumerloan + "";
    Layout = "~/Views/Shared/_SUBLayout1.cshtml";
    var plan = (List<FOModels.Loan.LoanPlanCategoryModels>)ViewBag.LoanPlan;
    var cate = (List<FOModels.Loan.LoanCategoryModels>)ViewBag.LoanCate;
    var loan = (List<FOModels.Loan.LoanModels>)ViewBag.LoanDefault;
    int i = 1;
    int j = 1;
    var nogoc = 0;
    var ProDes = (FOModels.Product.ProductModels)ViewBag.ProDes;
}

<style>
    .slider1 {
        background: #144060 !important;
        height: 7px !important;
        position: relative;
        cursor: pointer;
        border: 1px solid #333 !important;
        width: 280px !important;
        float: left !important;
        clear: right !important;
        margin-top: 10px !important;
        margin-bottom: 30px !important;
        border-radius: 5px !important;
        -moz-border-radius: 5px !important;
        -webkit-border-radius: 5px !important;
        box-shadow: inset 0 0 8px #000 !important;
        -webkit-box-shadow: inset 0 0 8px #000 !important;
    }

    #vn-box {
        margin-left: 20px;
    }

    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
        background: #fff url("../Content/images/h30.png") repeat-x 0 0;
        height: 20px;
        width: 20px;
        top: -10px;
        position: absolute;
        display: block;
        margin-top: 1px;
        border: 1px solid #000;
        cursor: move;
        box-shadow: 0 0 6px #000;
        -moz-box-shadow: 0 0 6px #000;
        -webkit-box-shadow: 0 0 6px #000;
        border-radius: 14px;
        -moz-border-radius: 14px;
        -webkit-border-radius: 14px;
    }

    .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
        background: #fff url("../Content/images/h30.png") repeat-x 0 0;
        height: 20px;
        width: 20px;
        top: -10px;
        position: absolute;
        display: block;
        margin-top: 1px;
        border: 1px solid #000;
        cursor: move;
        box-shadow: 0 0 6px #000;
        -moz-box-shadow: 0 0 6px #000;
        -webkit-box-shadow: 0 0 6px #000;
        border-radius: 14px;
        -moz-border-radius: 14px;
        -webkit-border-radius: 14px;
    }
</style>
<script src="@Url.Content("~/Content/js/jquery-ui.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/js/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/js/jquery-ui.js")" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/Content/js/jquery.smoothDivScroll-1.0.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/js/jquery.smoothDivScroll-1.0-min.js")"></script>
<script src="@Url.Content("~/Content/js/jquery.fancybox.js")" type="text/javascript"></script>

<script type="text/javascript">
    function number_format(number, decimals, dec_point, thousands_sep) {

        var n = number, c = isNaN(decimals = Math.abs(decimals)) ? 2 : decimals;
        var d = dec_point == undefined ? "," : dec_point;
        var t = thousands_sep == undefined ? "." : thousands_sep, s = n < 0 ? "-" : "";
        var i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;

        return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
    }
    function convertounsign(str) {
        str = str.toLowerCase();
        str = str.replace(/à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ/g, "a");
        str = str.replace(/è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ/g, "e");
        str = str.replace(/ì|í|ị|ỉ|ĩ/g, "i");
        str = str.replace(/ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ/g, "o");
        str = str.replace(/ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ/g, "u");
        str = str.replace(/ỳ|ý|ỵ|ỷ|ỹ/g, "y");
        str = str.replace(/đ/g, "d");
        str = str.replace(/!|%|\^|\*|\(|\)|\+|\=|\<|\>|\?|\/|,|\.|\:|\;|\'| |\"|\&|\#|\[|\]|~|$|_/g, "-");
        /* tìm và thay thế các kí tự đặc biệt trong chuỗi sang kí tự - */
        str = str.replace(/-+-/g, "-"); //thay thế 2- thành 1- 
        str = str.replace(/^\-+|\-+$/g, "");
        //cắt bỏ ký tự - ở đầu và cuối chuỗi  
        return str;
    }
    $(function() {
        var val = 0;
        $("#slider_amount").slider({
            value: 50000000,
            min: 10000000,
            max: 10000000000,
            step: 500000,
            slide: function (event, ui) {
                $("#amount-loan").val(ui.value);
                var AppUrl = $("#AppUrl").text();
                val = $("#amount-loan").val().replace(".", "").replace(".", "").replace(".", "");;
                var val_cate = $("#rel_cate").attr("rel");
                var val_plan = $("#rel_plan").attr("rel");
                var val_month = $("#years-loan").val();
                var ba = parseFloat(val);
                $("#amount-loan").val(number_format(ui.value, 0, ".", "."));
                $.ajax({
                    type: "post",
                    url: AppUrl + "/Loan/getLoan",
                    data: {cate:val_cate, planid: val_plan, balance: ba,years:val_month },
                    dataType: "json",
                    success: function (rvdata) {
                        var htmlcode = "";
                        if (val_cate == 1) {
                            $(rvdata).each(function (index, item) {
                                htmlcode += "<tr>";
                                htmlcode += "<td class='td-bank-saving'>";
                                htmlcode += "<a href='#'> <img src='" + AppUrl + "/Content/upload/images/" + item.CompanyImg + "'></a>";
                                htmlcode += " <p class='bank-title' style='font-size:12px;' >" + item.LoanName + " <strong>" + item.CompanyName + "</strong></p>";
                                htmlcode += " </td>";
                                htmlcode += " <td>";
                                htmlcode += "<div class='item-list'>" + item.Benefit + "</div>";
                                htmlcode += "</td>";
                                htmlcode += " <td style='vertical-align:middle;'>";
                                htmlcode += "<p class='text-p'>" + item.InterestRate + " %</p>";
                                htmlcode += " </td>";
                                htmlcode += " <td style='vertical-align:middle;'>";
                                htmlcode += "<p class='text-p'>" + number_format(ba / val_month, 0, ".", ".") + "</p>";
                                htmlcode += " </td>";
                                htmlcode += " <td class='td-btn'>";
                                htmlcode += "	<a class='btn-app' href='" + AppUrl + "/Loan/LoanInfo/" + item.HomeLoanID + "'>Tham gia >></a>";
                                htmlcode += "</td>";
                                htmlcode += " </tr>";
                            });
                        }
                        else {
                            var payment = 0;
                            $(rvdata).each(function (index, item) {
                                var total = 0;
                                for (i = 1; i <= val_month; i++) {
                                    total += Math.pow((1 + (item.InterestRate / 100 / 12)), -i);
                                }
                                htmlcode += "<tr>";
                                htmlcode += "<td class='td-bank-saving'>";
                                htmlcode += "<a href='#'> <img src='" + AppUrl + "/Content/upload/images/" + item.CompanyImg + "'></a>";
                                htmlcode += " <p class='bank-title' style='font-size:12px;' >" + item.LoanName + " <strong>" + item.CompanyName + "</strong></p>";
                                htmlcode += " </td>";
                                htmlcode += " <td>";
                                htmlcode += "<div class='item-list'>" + item.Benefit + "</div>";
                                htmlcode += "</td>";
                                htmlcode += " <td style='vertical-align:middle;'>";
                                htmlcode += "<p class='text-p'>" + item.InterestRate + " %</p>";
                                htmlcode += " </td>";
                                htmlcode += " <td style='vertical-align:middle;'>";
                                htmlcode += "<p class='text-p'>" + number_format(ba / total, 0, ".", ".") + "</p>";
                                htmlcode += " </td>";
                                htmlcode += " <td class='td-btn'>";
                                htmlcode += "	<a class='btn-app' href='" + AppUrl + "/Loan/LoanInfo/" + item.HomeLoanID + "'>Tham gia >></a>";
                                htmlcode += "</td>";
                                htmlcode += " </tr>";
                            });
                        }
                        $("#loan-list").html(htmlcode);
                    }
                });
            }
        });
        $("#amount-carloantrust").val(number_format($("#slider_amount").slider("value"), 0, ".", "."));
        val = $("#slider_amount").slider("value");
    });
    $(function() {
        $("#slider_year").slider({
            value:10,
            min: 1,
            max: 240,
            step: 1,
            slide: function( event, ui ) {
                $("#years-loan").val(ui.value);
                function number_format(number, decimals, dec_point, thousands_sep) {

                    var n = number, c = isNaN(decimals = Math.abs(decimals)) ? 2 : decimals;
                    var d = dec_point == undefined ? "," : dec_point;
                    var t = thousands_sep == undefined ? "." : thousands_sep, s = n < 0 ? "-" : "";
                    var i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;

                    return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
                }

                var AppUrl = $("#AppUrl").text();
                var val = $("#amount-loan").val();
                var val_cate = $("#rel_cate").attr("rel");
                var val_plan = $("#rel_plan").attr("rel");
                var val_month = $("#years-loan").val();
                var a = val + "000000";
                var ba = parseFloat(a);
                $.ajax({
                    type: "post",
                    url: AppUrl + "/loan/getLoan",
                    data: {cate:val_cate, planid: val_plan, balance: val },
                    dataType: "json",
                    success: function (rvdata) {
                        var htmlcode = "";
                        if (val_cate == 1) {
                            $(rvdata).each(function (index, item) {
                                htmlcode += "<tr>";
                                htmlcode += "<td class='td-bank-saving'>";
                                htmlcode += "<a href='#'> <img src='" + AppUrl + "/Content/upload/images/" + item.CompanyImg + "'></a>";
                                htmlcode += " <p class='bank-title' style='font-size:12px;' >" + item.LoanName + " <strong>" + item.CompanyName + "</strong></p>";
                                htmlcode += " </td>";
                                htmlcode += " <td>";
                                htmlcode += "<div class='item-list'>" + item.Benefit + "</div>";
                                htmlcode += "</td>";
                                htmlcode += " <td style='vertical-align:middle;'>";
                                htmlcode += "<p class='text-p'>" + item.InterestRate + " %</p>";
                                htmlcode += " </td>";
                                htmlcode += " <td style='vertical-align:middle;'>";
                                htmlcode += "<p class='text-p'>" + number_format(ba / val_month, 0, ".", ".") + "</p>";
                                htmlcode += " </td>";
                                htmlcode += " <td class='td-btn'>";
                                htmlcode += "	<a class='btn-app' href='" + AppUrl + "/Loan/LoanInfo/" + item.HomeLoanID + "'>Tham gia >></a>";
                                htmlcode += "</td>";
                                htmlcode += " </tr>";
                            });
                        }
                        else {
                            var payment = 0;
		               
                            $(rvdata).each(function (index, item) {
                                var total = 0;
                                for (i = 1; i <= val_month; i++) {
                                    total += Math.pow((1 + (item.InterestRate / 100 / 12)), -i);
                                }
                                htmlcode += "<tr>";
                                htmlcode += "<td class='td-bank-saving'>";
                                htmlcode += "<a href='#'> <img src='" + AppUrl + "/Content/upload/images/" + item.CompanyImg + "'></a>";
                                htmlcode += " <p class='bank-title' style='font-size:12px;' >" + item.LoanName + " <strong>" + item.CompanyName + "</strong></p>";
                                htmlcode += " </td>";
                                htmlcode += " <td>";
                                htmlcode += "<div class='item-list'>" + item.Benefit + "</div>";
                                htmlcode += "</td>";
                                htmlcode += " <td style='vertical-align:middle;'>";
                                htmlcode += "<p class='text-p'>" + item.InterestRate + " %</p>";
                                htmlcode += " </td>";
                                htmlcode += " <td style='vertical-align:middle;'>";
                                htmlcode += "<p class='text-p'>" + number_format(ba / total, 0, ".", ".") + "</p>";
                                htmlcode += " </td>";
                                htmlcode += " <td class='td-btn'>";
                                htmlcode += "	<a class='btn-app' href='" + AppUrl + "/Loan/LoanInfo/" + item.HomeLoanID + "'>Tham gia >></a>";
                                htmlcode += "</td>";
                                htmlcode += " </tr>";
                            });
                        }
                        $("#loan-list").html(htmlcode);
                    }
                });
            }
        });
        $("#years-loan").val($("#slider_year").slider("value"));
    });
</script>

<div id="v3HomeBody">
    <!--Open Bread crumb-->
    <div class="bread_crumb">
        <ul>
            <li><a href="/" class="bread_arrow" title="@FOResource.UI.Layout.lblhome">@FOResource.UI.Layout.lblhome</a></li>
            <li><a href="@Url.Action("Index", "Loan")" class="bread_arrow" title="@FOResource.UI.Product.Loan.consumerloan">@FOResource.UI.Product.Loan.consumerloan</a></li>
            <li class="lastli"><a href="@Url.Action("Index", "Loan")" class="bold" title="Lựa chọn">@FOResource.UI.Product.Deposit.selectpro</a></li>
        </ul>
    </div>
    <!--Close Bread crumb-->

    <!--Open Top Slider-->
    <div class="top_slider" id="afocus">
        <ol class="top_bar">
            <li style="width: 164px;"><a href="@Url.Action("Index", "Loan")" class="active" id="show_div"><span style="left: -13px;">@FOResource.UI.Layout.lblchoose</span></a> </li>
            <li style="width: 164px;"><a class="bar_2"><span style="left: -13px;">@FOResource.UI.Layout.lblinfo</span></a></li>
            <li style="width: 60px;"><a class="bar_3"><span style="left: -13px;">@FOResource.UI.Layout.lblcontract</span></a></li>
        </ol>
        <span class="h1replace">...</span>

    </div>
    <div class="clear"></div>
    <div class="pane-content">
        <div class="pane-content">

            <div id="home-loan-calculator" style="height: 100px; margin-bottom: 0px;">
                <div id="calculator-form" style="width: 100%;">
                    <h3>@FOResource.UI.Product.Loan.loanproduct</h3>
                    <div id="radio-wrapper">


                        <span style="float: left; width: 760px;">
                            @foreach (var c in cate)
                            {

                                if (j == 1)
                                {
                                <span id="rel_cate" rel="@c.LoanCategoryID"></span>
                                <label style="width: 253px;">
                                    <input type="radio" class="reward" checked="checked" name="card_types" onclick="return ajaxloancate('@c.LoanCategoryID    ');" value="1" />
                                    @c.LoanCategoryName</label>
                                }
                                else
                                {
                                <label style="width: 253px;">
                                    <input type="radio" class="reward"  name="card_types" onclick="return ajaxloancate('@c.LoanCategoryID    ');" value="1" />
                                    @c.LoanCategoryName</label>
                                }
                                j = j + 1;

                            }
                        </span>



                    </div>
                </div>
            </div>

        </div>
        <div id="home-loan-calculator" style="height: 180px;">
            <div id="calculator-form">
                <form>
                    <h3>@FOResource.UI.Product.HomeLoan.loanperiod</h3>
                    <div id="amount-wrapper">
                        <div class="slider1" style="width: 190px !important;" id="slider_amount">
                            <div class="progress"></div>
                        </div>
                        <input type="text" class="amount" name="amount" id="amount-loan" /><span class="suffix"> @FOResource.UI.Product.Deposit.thousand VND</span>
                    </div>
                    <div class="clear"></div>
                    <h3>@FOResource.UI.Product.HomeLoan.loanperiod</h3>
                    <div id="tenure-wrapper">
                        <div class="slider1" style="width: 190px !important;" id="slider_year">
                            <div class="progress"></div>
                        </div>
                        <input type="text" class="years" name="years" id="years-loan" /><span class="suffix"> @FOResource.UI.Product.Deposit.month</span>
                    </div>
                </form>
            </div>
            <div id="home-loan-tips">
                <h3>@FOResource.UI.Product.HomeLoan.payments</h3>
                <span style="float: left; width: 100%;">
                    @if (plan.Count > 0)
                    {
                        foreach (var ca in plan)
                        {

                            if (i == 1)
                            {
                        <span id="rel_plan" rel="@ca.LoanPlanCategoryID"></span>
                        <label>
                            <input type="radio" onchange="return loanplancate('@ca.LoanPlanCategoryID')" checked="checked"  name="features" value="@ca.LoanPlanCategoryID" />
                            @ca.LoanPlanCategoryName</label>
                        <br />
                            }
                            else
                            {
                        <label>
                            <input type="radio" name="features" onchange="return loanplancate('@ca.LoanPlanCategoryID')" value="@ca.LoanPlanCategoryID" />
                            @ca.LoanPlanCategoryName</label>
                        <br />
                            }
                            i = i + 1;


                        }
                    }

                </span>
            </div>
        </div>

    </div>

    <table class="product-table">
        <tr>
            <th style="width: 20%;">@FOResource.UI.Product.Card.lblbank</th>
            <th>@FOResource.UI.Product.Card.lblbenefit</th>
            <th style="width: 15%;">@FOResource.UI.Product.Deposit.interest
                <br />@FOResource.UI.Product.Deposit.peryear</th>
            <th id="th-loan">@FOResource.UI.Product.HomeLoan.debt (VND)</th>
            <th>@FOResource.UI.Product.Card.lblapply</th>
            <tr>
                <tbody id="loan-list">
                    @if (loan.Count > 0)
                    {
                        foreach (var h in loan)
                        {
                            nogoc = 20000000 / 10;
                        <tr>

                            <td class="td-bank-saving">
                                <a href="#">
                                    <img src="@Url.Content("~/Content/upload/images/" + h.CompanyImg + "")"></a>
                                <p class="bank-title" style="font-size: 12px;">@h.LoanName <strong>@h.CompanyName</strong></p>
                            </td>
                            <td>
                                <div class="item-list">
                                    @Html.Raw(h.Benefit)
                                </div>
                            </td>
                            <td style="vertical-align: middle;">
                                <p class="text-p">@h.InterestRate %</p>

                            </td>
                            <td style="vertical-align: middle;">
                                <p class="text-p">@String.Format("{0:0,0}", nogoc)</p>

                            </td>
                            <td class="td-btn">
                                @Html.ActionLink("" + FOResource.UI.Product.Card.lblapply + "", "LoanInfo", "Loan", new { LoanID = h.LoanID }, new { @class = "btn-app", rel = "" + h.LoanID + "" })
                            </td>

                        </tr>
                        }
                    }
                </tbody>
    </table>

    <!--Close Form Info-->
    <div class="bot-main">
        <div class="bottom_tabbed" style="float: left; width: 960px; margin-bottom: 30px;">
            <div class="bottom_center">
                @Html.Raw(ProDes.Description)
            </div>
            <div class="clr"></div>
            <p id="vnquestion-fb">@FOResource.UI.Layout.cmt</p>
            <div style="float: left;">

                <div class="clr"></div>
                <div id="fb-root"></div>
                <div class="fb-comments" data-href="@Request.Url.AbsoluteUri" data-width="645" style="margin-right:10px;"></div>
            </div>

            <div style="float: left;">

                <div id="vnbanknet-facebook" style="margin: 0;">
                    <div class="fb-like-box" data-href="http://facebook.com/vnbanknet" data-width="300" data-height="270" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
                </div>
            </div>

        </div>

        <div class="clr"></div>
    </div>


</div>
